<template>
  <AxiomBottomSheet
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
  >
    <div class="axiom-date-sheet">
      <!-- Header -->
      <div class="header">
        <AxiomButton
          size="small"
          type="primary"
          @click="handleClear"
          class="btn-clear"
        >
          清空
        </AxiomButton>
        
        <AxiomTitle
          :title="title"
          type="component"
          level="3"
          class="sheet-title"
        />
        
        <AxiomButton
          size="small"
          @click="$emit('update:visible', false)"
          class="btn-close"
        >
          <AxiomIcon name="Close" size="16" />
        </AxiomButton>
      </div>
      
      <!-- Date Display -->
      <div class="date-display">
        <div class="date-value">{{ formatDate(selectedYear, selectedMonth, selectedDay) }}</div>
      </div>
      
      <!-- Wheel Picker -->
      <div class="wheel-picker">
        <div class="wheel-column">
          <div class="wheel-header">{{ selectedYear }}年</div>
          <div class="wheel-scroll">
            <div 
              v-for="year in years" 
              :key="year"
              :class="['wheel-item', { active: year === selectedYear }]"
              @click="selectYear(year)"
            >
              {{ year }}年
            </div>
          </div>
        </div>
        
        <div class="wheel-column">
          <div class="wheel-header">{{ String(selectedMonth).padStart(2, '0') }}月</div>
          <div class="wheel-scroll">
            <div 
              v-for="month in months" 
              :key="month"
              :class="['wheel-item', { active: month === selectedMonth }]"
              @click="selectMonth(month)"
            >
              {{ String(month).padStart(2, '0') }}月
            </div>
          </div>
        </div>
        
        <div class="wheel-column">
          <div class="wheel-header">{{ String(selectedDay).padStart(2, '0') }}日</div>
          <div class="wheel-scroll">
            <div 
              v-for="day in daysInMonth" 
              :key="day"
              :class="['wheel-item', { active: day === selectedDay }]"
              @click="selectDay(day)"
            >
              {{ String(day).padStart(2, '0') }}日
            </div>
          </div>
        </div>
      </div>
      
      <!-- Footer Button -->
      <div class="footer">
        <AxiomButton
          type="primary"
          size="large"
          @click="handleConfirm"
          class="confirm-button"
        >
          确定
        </AxiomButton>
      </div>
    </div>
  </AxiomBottomSheet>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import AxiomBottomSheet from './AxiomBottomSheet.vue';
import AxiomButton from '../common/AxiomButton.vue';
import AxiomTitle from '../common/AxiomTitle.vue';
import AxiomIcon from '../common/AxiomIcon.vue';

const props = defineProps({
  visible: Boolean,
  title: {
    type: String,
    default: '选择日期'
  },
  modelValue: String
});

const emit = defineEmits(['update:visible', 'update:modelValue', 'confirm']);

const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
const currentDay = new Date().getDate();

const years = ref(Array.from({ length: 10 }, (_, i) => currentYear - 5 + i));
const months = ref(Array.from({ length: 12 }, (_, i) => i + 1));

const selectedYear = ref(currentYear);
const selectedMonth = ref(currentMonth);
const selectedDay = ref(currentDay);

const daysInMonth = computed(() => {
    const daysCount = new Date(selectedYear.value, selectedMonth.value, 0).getDate();
    return Array.from({ length: daysCount }, (_, i) => i + 1);
});


const initializeValues = () => {
  if (props.modelValue) {
    const date = new Date(props.modelValue);
    if (!isNaN(date.getTime())) {
      selectedYear.value = date.getFullYear();
      selectedMonth.value = date.getMonth() + 1;
      selectedDay.value = date.getDate();
    }
  } else {
      selectedYear.value = currentYear;
      selectedMonth.value = currentMonth;
      selectedDay.value = currentDay;
  }
};

watch(() => props.modelValue, initializeValues, { immediate: true });
watch(() => props.visible, (newVal) => {
    if(newVal) {
        initializeValues();
    }
});

const getDaysInMonth = (year, month) => {
  const daysCount = new Date(year, month, 0).getDate();
  return Array.from({ length: daysCount }, (_, i) => i + 1);
};

const formatDate = (year, month, day) => {
  if (!year || !month || !day) return '请选择日期';
  return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
};

const handleConfirm = () => {
  const result = formatDate(selectedYear.value, selectedMonth.value, selectedDay.value);
  emit('update:modelValue', result);
  emit('confirm', result);
  emit('update:visible', false);
};

const handleClear = () => {
  emit('update:modelValue', '');
  emit('confirm', '');
};

const selectYear = (year) => { selectedYear.value = year; };
const selectMonth = (month) => { selectedMonth.value = month; };
const selectDay = (day) => { selectedDay.value = day; };

</script>

<style lang="scss">
@use '../../styles/components/mobile/axiom-date-sheet';

.date-display {
  padding: 16px 24px;
  background: var(--bg-color-secondary);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  
  .date-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
  }
}

.wheel-picker {
  display: flex;
  height: 200px;
  background: var(--bg-color-secondary);
  
  .wheel-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    
    .wheel-header {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-color);
      text-align: center;
      padding: 16px 0;
      background: var(--bg-color-secondary);
      border-bottom: 1px solid var(--border-color);
    }
    
    .wheel-scroll {
      flex: 1;
      overflow-y: auto;
      position: relative;
      
      &::-webkit-scrollbar {
        display: none;
      }
      
      .wheel-item {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: var(--text-color-light);
        cursor: pointer;
        transition: all 0.2s ease;
        
        &.active {
          color: var(--text-color);
          font-weight: 600;
          background: var(--bg-color-tertiary);
        }
        
        &:hover {
          background: var(--bg-color-tertiary);
        }
      }
    }
  }
}

.header-btn {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  
  &:hover {
    background: var(--bg-color-tertiary);
  }
}
</style> 